@import '~/assets/style/vars.less';
@import '~/assets/style/mixin.less';

.list {
  background-color: transparent;

  &-head {
    margin-bottom: 35px;
  }

  &-body {
    background-color: @color-white;
  }

  &-foot {
    background-color: @color-white;
  }

  &-topic {
    margin-bottom: 30px;
    padding: 36px 88px;
    background-color: @color-white;
    &-thumb {
      margin-bottom: 30px;
      width: 100%;
      height: 225px;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    &-main {
      margin-bottom: 0;
      line-height: 25px;
    }
    &-head {
      margin-bottom: 8px;
      /deep/.icon {
        font-size: 13px;
      }
      /deep/.ant {
        &-btn-sm {
          min-width: 70px;
        }
      }
    }
    &-title {
      margin-right: 26px;
      font-weight: 600;
      font-size: 18px;
    }
    &-body {
      .text-ellipsis(2);
      position: relative;
      margin-bottom: 0;
      max-height: 50px;
      &__opened {
        .text-ellipsis(999);
        max-height: initial;
        overflow: auto;
      }
    }
    &-btn {
      .anim-color();
      display: none;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 2;
      padding-left: 25px;
      height: 25px;
      cursor: pointer;
      background-image: linear-gradient(to right, transparent , @color-white);

      &:hover {
        color: @color-primary;
      }

      /deep/.icon {
        font-size: 12px;
      }
    }
  }

  // ---
  /deep/.ant {
    // pagination
    // ---
    &-pagination {
      padding: 20px 20px 48px;
      border-top: 1px solid #eee;
      text-align: right;
    }
  }
}
